<template>
	<view :style="[AppSkinVar]">
		<e-loading-page :loading="loading"   >
			<template #icon>
				<loader ></loader>
			</template>
		</e-loading-page>
		<view class="e-p-20">
			<view class="header e-flex-xy-center c-white text-center">
				<view>
					<view>
						<text class="e-font-64">{{ total }}</text>
						<text>{{ $t('user.人') }}</text>
					</view>
					<view class="e-font-26 e-m-t-10">
						{{ $t('user.已成功邀请') }}
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="e-p-30 e-flex" v-for="item in list" :key="item.id">
				<load-image mode="aspectFit" shape="circle" :size="['84rpx']" :src="item.userPhoto"
					v-if="item.userPhoto">
				</load-image>
				<app-image mode="aspectFit" :size="['84rpx']" src="default-headerImg.png" v-else />
				<view class="e-flex-1 e-m-l-20">
					<view class="fw-500">
						{{ item.userNickname }}
					</view>
					<view class="e-flex e-flex-between e-m-t-4">
						<view>
							{{ item.userPhone }}
						</view>
						<view class="e-font-26 c-regular ">
							{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}
						</view>
					</view>
				</view>
			</view>
			<load-more v-if="!isEmpty" :showLoad="showLoad"></load-more>
			<empty v-else paddingTop="100rpx" :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')"></empty>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	// 所有可被装修选中的页面的混入，用于动态修改标题，例如装修的按钮组组件，按钮的文本为xxx，跳转到对应页面时，会将页面的标题修改为xxx
	import layoutPageTitleMixIn from '@/common/mixin/layoutPageTitleMixIn'
	export default defineComponent({
		mixins: [layoutPageTitleMixIn],
	})
</script>
<script setup lang="ts">
	import { ref } from 'vue'
	import {
		getInviteDetail
	} from '@/common/request/api'
	import { useQueryPage } from '@/common/hooks'
	import {
		onReachBottom
	} from '@dcloudio/uni-app'
	import { timeFormat } from '@/common/utils'

	const loading = ref(true)
	const total = ref(0)
	const {
		showLoad,
		isEmpty,
		list,
		handleQueryPage,
		handleRefresh
	} = useQueryPage({
		api: getInviteDetail,
		option: {
			responseInterception(res) {
				total.value = res.total || 0
			}
		}
	})

	handleRefresh().then(() => {
		loading.value = false
	})

	onReachBottom(() => {
		handleQueryPage()
	})
</script>

<style lang="scss" scoped>
	.header {
		height: 216rpx;
		background: var(--gradient-primary);

		.e-font-64 {
			font-size: 64rpx;
		}
	}
</style>